<template>
	<el-row class="admin_login">
		<el-row class="div1">
			<el-row class="div2">
				<p class="p1">后台管理</p>
			</el-row>
			<el-form class="inp" ref="form">
				<el-form-item>
					<el-input v-model="user.username" placeholder="请输入账号"></el-input>
				</el-form-item>

				<el-form-item>
					<el-input v-model="user.password" placeholder="请输入密码" show-password></el-input>
				</el-form-item>
			</el-form>

			<p><button @click="login()">登录</button></p>
		</el-row>
	</el-row>
</template>

<script>
	export default {
		name: 'AdminLogin',
		data() {
			return {
				user: {}
			}
		},
		methods: {
			login() {
				this.$postkv("/api/login", this.user)
					.then((resp) => {
						console.log(resp.data);
						console.log(resp.data.data.token);
						// 获取token,并把他存在浏览器里面
						let token = resp.data.data.token;
						window.localStorage.setItem("token", token);

						//头部带上token获取用户信息
						this.$get("/api/user/info").then((resp) => {
							console.log(resp.data);
							window.localStorage.setItem("img", resp.data.data.img);
							window.localStorage.setItem("name", resp.data.data.name);
							this.$store.state.name = resp.data.data.name;
							this.$store.state.pic = resp.data.data.img;
							// 跳转管理员首页
							this.$router.push("/adm/backstage");
						})
				})
			}
		}
	}
</script>

<style scoped>
	.admin_login {
		width: 100%;
		height: 950px;
		background-image: url(../../assets/img/mobile/bg.png);
		/* 达到窗口百分百比例 */
		background-size: cover;
		/* 图片固定,不随着页面的滚动而移动 */
		background-attachment: fixed;
		display: flex;
	}

	.admin_login .div1 {
		background-color: #ffffff;
		margin: auto auto;
		width: 380px;
		border-radius: 3px;
	}

	.div1 .inp {
		width: 300px;
		margin-left: 30px;
		margin-top: 10px;
	}

	.div1 p {
		margin-left: 40px;
		line-height: 30px;
	}

	.div1 p button {
		height: 40px;
		width: 310px;
		color: #FFFFFF;
		background-color: #189f92;
		border: none;
		border-radius: 4px;
		margin-bottom: 30px;
		font-size: 16px;
	}

	.div2 {
		margin-top: 35px;
		background-color: #189f92;
		width: 360px;
		height: 50px;
		margin-left: -19px;
		border-radius: 2px;
	}

	.p1 {
		color: white;
		position: absolute;
		margin-top: 10px;
		font-size: 20px;
	}

	.div4 {
		margin-left: -3.1vw;
		width: 2vw;
		margin-top: -1vw;
		margin-top: 0.01vw;
		border-right: 14px solid black;
		border-bottom: 19px solid transparent;
	}
</style>